// 1. React核心库
import React, { useState, useEffect } from 'react';

// 2. UI组件库 - 按字母顺序
import { Card, Descriptions, Button, message, Tag, Typography } from 'antd';

// 3. 图标库
import { EditOutlined, ArrowLeftOutlined } from '@ant-design/icons';

// 4. 专业组件库
import { PageContainer } from '@ant-design/pro-components';

// 5. 工具库
import { useParams } from '@umijs/max';
import dayjs from 'dayjs';

// 7. 项目内部模块
import { apiClients } from '@/services/apiClient';
import { autoLoginInDev } from '@/utils/autoLogin';

// 8. 生成的类型定义 (必须使用，禁止手工定义)
import type { AIRole } from '@/services/generated';

const { Paragraph } = Typography;

const AIRoleDetail: React.FC = () => {
  const { id } = useParams<{ id: string }>();
  const [data, setData] = useState<AIRole | null>(null);
  const [loading, setLoading] = useState(false);

  // 分类映射
  const categoryMap = {
    assistant: { color: 'blue', text: '通用助手' },
    creative: { color: 'green', text: '创作写作' },
    analysis: { color: 'orange', text: '分析总结' },
    education: { color: 'purple', text: '教育培训' },
    programming: { color: 'red', text: '编程开发' },
    business: { color: 'cyan', text: '商务办公' },
    entertainment: { color: 'magenta', text: '娱乐休闲' },
    custom: { color: 'default', text: '自定义' },
  };

  useEffect(() => {
    const fetchData = async () => {
      try {
        setLoading(true);
        await autoLoginInDev();
        const response = await apiClients.aiChat.aiChatRolesRetrieve({ id: id! });
        setData(response.data);
      } catch (error) {
        message.error('获取角色详情失败');
      } finally {
        setLoading(false);
      }
    };
    if (id) fetchData();
  }, [id]);

  const category = data?.category ? categoryMap[data.category as keyof typeof categoryMap] : null;

  return (
    <PageContainer
      loading={loading}
      header={{
        title: 'AI角色详情',
        subTitle: data?.name || '加载中...',
      }}
    >
      <Card>
        <Descriptions column={2} bordered>
          <Descriptions.Item label="ID">{data?.id}</Descriptions.Item>
          <Descriptions.Item label="角色名称">{data?.name}</Descriptions.Item>
          
          <Descriptions.Item label="分类">
            {category ? (
              <Tag color={category.color}>{category.text}</Tag>
            ) : (
              data?.category || '-'
            )}
          </Descriptions.Item>
          
          <Descriptions.Item label="公开状态">
            <Tag color={data?.is_public ? 'blue' : 'default'}>
              {data?.is_public ? '公开' : '私有'}
            </Tag>
          </Descriptions.Item>
          
          <Descriptions.Item label="使用次数">
            <Tag color="purple">{(data?.usage_count || 0).toLocaleString()} 次</Tag>
          </Descriptions.Item>
          
          <Descriptions.Item label="创建时间">
            {data?.created_at ? dayjs(data.created_at).format('YYYY-MM-DD HH:mm:ss') : '-'}
          </Descriptions.Item>
          
          <Descriptions.Item label="更新时间">
            {data?.updated_at ? dayjs(data.updated_at).format('YYYY-MM-DD HH:mm:ss') : '-'}
          </Descriptions.Item>
          
          <Descriptions.Item label="创建者ID">{data?.created_by || '-'}</Descriptions.Item>
          
          <Descriptions.Item label="系统提示词" span={2}>
            {data?.system_prompt ? (
              <Card size="small" style={{ background: '#f8f9fa', border: '1px solid #e9ecef' }}>
                <Paragraph 
                  copyable={{ text: data.system_prompt }}
                  style={{ 
                    whiteSpace: 'pre-wrap', 
                    margin: 0,
                    fontFamily: 'Monaco, Consolas, "Courier New", monospace',
                    fontSize: '13px',
                    lineHeight: '1.5'
                  }}
                >
                  {data.system_prompt}
                </Paragraph>
              </Card>
            ) : (
              '无'
            )}
          </Descriptions.Item>
        </Descriptions>
        
        <div style={{ marginTop: 16 }}>
          <Button 
            type="primary" 
            icon={<EditOutlined />}
            href={`/ai-chat/roles/edit/${id}`}
            style={{ marginRight: 8 }}
          >
            编辑
          </Button>
          <Button 
            icon={<ArrowLeftOutlined />}
            href="/ai-chat/roles"
          >
            返回列表
          </Button>
        </div>
      </Card>
    </PageContainer>
  );
};

export default AIRoleDetail;